<template>
	<view class="rounded-lg bg-white p-20 mb-30" @click="handleGoDetail(val)">
		<view class="flex item">
			<view class="w-72 h-72 rounded-lg overflow-hidden" v-if="val?.member?.ach == 1">
				<ImageBoxVue :src="val?.member?.anchor.headimg"></ImageBoxVue>
			</view>
			<view class="w-72 h-72 rounded-lg overflow-hidden" v-else>
				<ImageBoxVue :src="val?.member?.headimg"></ImageBoxVue>
			</view>
			<view>
				<view class="ml-10" v-if="val?.member?.ach == 1">
					<text class="">{{val.member?.anchor.name}}</text>
					<view class="bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
						<text class="text-white font-bold">LV.{{val.member?.anchor.achorlevel.lev}}</text>
					</view>
				</view>
				<view class="ml-10" v-else>
					<text class="">{{val?.member?.nickname}}</text>
					<view class="bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
						<text class="text-white font-bold">LV.{{val?.member?.openlev}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-20">{{val.title}}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		provide,
	} from 'vue';
	const {
		val
	} = defineProps(['val'])
	const emit = defineEmits(['onReply'])

	provide('val', val)

	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach

	const handleGoDetail = (val) => {
		uni.navigateTo({
			url: `/pages/community/talkDetails?id=${val.id}`
		})
	}

	const onReply = (val) => {
		emit('onReply', val)
	}
</script>

<style lang="scss" scoped>
	.box-model {
		align-items: stretch;

		.item {
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>